Migrated project from pages to app router #380

zoosphar · 2024-01-22T12:39:31Z

Objective
This PR will migrate the jsoncrack project from the old next.js pages router to the new app router.

Changes

Project structure to consider the app directory as the entry point and move all the existing routes from the pages directory.
pages/_app.tsx and pages/_document.tsx files are replaced by app/layout.tsx.
Custom metatags inside the headtags are replaced by exporting the metadata constant from the app/layout.tsx file. I will continue doing the same for all files.
pages/_error.tsx is replaced by app/not-found.tsx which can not only serve a custom error UI but can also send HTTP status and serve metatags out of the box.
next/router is replaced by next/navigation which is a simplified API.

References used for migration

Testing
Tested the routes and functionalities by doing feature by feature test taking the production(jsoncrack.com) as the reference.

TallTed

Language improvements

TallTed · 2024-01-22T17:05:04Z

src/app/layout.tsx

+    icon: "/favicon.ico",
+  },
+  description:
+    "Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.",


Suggested change

"Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.",

"Innovative and open-source visualization application that produces interactive graphs from various data formats, such as JSON, YAML, XML, CSV and more.",

@TallTed Thank you for suggesting these changes but I didn't change any language in the metatags, it was as it is from the original repo.
This PR only focuses on upgrading the project from the pages router to the app router.

Will fix these in another PR maybe.

TallTed · 2024-01-22T17:05:11Z

src/app/layout.tsx

+  description:
+    "Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.",
+  openGraph: {
+    title: "JSON Crack - Visualize Data to Graphs",


Suggested change

title: "JSON Crack - Visualize Data to Graphs",

title: "JSON Crack - Visualize Data as Graphs",

TallTed · 2024-01-22T17:05:26Z

src/app/layout.tsx

+    title: "JSON Crack - Visualize Data to Graphs",
+    description:
+      "Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.",


Suggested change

title: "JSON Crack - Visualize Data to Graphs",

description:

"Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.",

title: "JSON Crack - Visualize Data as Graphs",

description:

"Innovative and open-source visualization application that produces interactive graphs from various data formats, such as JSON, YAML, XML, CSV and more.",

…t.tsx

…d services

TallTed · 2024-01-24T18:34:24Z

I'm not sure what you would like me to review. My previously suggested changes appear not to have been applied, though at least some of the text I suggested to change has been edited differently, but these edits are only visible commit-by-commit, not in the "files changed"...

zoosphar · 2024-01-27T08:04:51Z

I'm not sure what you would like me to review. My previously suggested changes appear not to have been applied, though at least some of the text I suggested to change has been edited differently, but these edits are only visible commit-by-commit, not in the "files changed"...

Hey @TallTed the changes you suggested are not in the scope of this PR, this PR only focuses on migrating the project from the pages router to the app router. Hence, I migrated the metadata from independent tags to a default object export.
Can you please review the migration and the adoption of new hooks like 'next/navigation' for routing?

zoosphar · 2024-01-28T11:08:28Z

Hey @TallTed
I have updated the metadata in this PR only. Please have a look at this commit

src/app/layout.tsx

Co-authored-by: Ted Thibodeau Jr <[email protected]>

TallTed

lgtm fwiw (I code almost exclusively in English)

AykutSarac · 2024-02-03T09:57:35Z

Looks like no migration made for useSearchParams, can we do that? Also why did we add the "impl" package to the project?

TallTed · 2024-02-05T03:42:14Z

src/app/docs/page.tsx

@@ -36,14 +36,14 @@ const StyledHighlight = styled.span<{ $link?: boolean; $alert?: boolean }>`
  margin: ${({ $alert }) => ($alert ? "8px 0" : "1px")};
 `;

-const Docs = () => {
+export default function Page() {
  return (
    <Layout>
      <Head>
        <title>Documentation - JSON Crack</title>
        <meta name="description" content="Embedding JSON Crack tutorial into your websites." />


Suggested change

<meta name="description" content="Embedding JSON Crack tutorial into your websites." />

<meta name="description" content="Embedding JSON Crack tutorial in your websites." />

TallTed · 2024-02-05T03:43:25Z

src/app/not-found.tsx

+          Page you are trying to open does not exist. You may have mistyped the address, or the page
+          has been moved to another URL. If you think this is an error contact support.


Suggested change

Page you are trying to open does not exist. You may have mistyped the address, or the page

has been moved to another URL. If you think this is an error contact support.

The page you are trying to open does not exist. You may have mistyped the address, or the page

may have been moved to another URL. If you think this is an error, contact support.

zoosphar · 2024-02-11T16:32:49Z

Looks like no migration made for useSearchParams, can we do that? Also why did we add the "impl" package to the project?

Hey @AykutSarac Thanks for the review, I have used useSearchParams from the next/navigation package which is supported in the app router, let me know why you think I should migrate it.
And I have installed "impl" package because of the following error:

AykutSarac · 2024-02-14T07:15:41Z

It's recommended by Next.js, also fails the build.
https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

zoosphar · 2024-02-14T08:49:49Z

It's recommended by Next.js, also fails the build. https://nextjs.org/docs/messages/missing-suspense-with-csr-bailout

Okay, got it. So adding a suspense boundary to the component would suffice right?

TallTed suggested changes Jan 22, 2024

View reviewed changes

zoosphar and others added 17 commits January 23, 2024 21:50

migrate: remove pages/_app.tsx & pages/_document.tsx, added app/layou…

3de41ff

…t.tsx

migrate: update next.config.js and tsconfig.json

a77ebc6

migrate: rename src/pages/index.tsx -> src/app/page.tsx

7d252a0

migrate: customAppInit for app initialization with required styles an…

90ca39b

…d services

migrate: new error handling file app/not-found.tsx

3267c01

migrate: update useRouter import from next/router to next/navigation

69d3ae3

further replace next/router with next/navigation

4c39339

migrate all routes from pages to app router

a1d25cf

add missing impl package

9b180f5

make undefined a fallback type for 'json' query param

2a44335

update metadataBase property in layout metadata export

cc3d382

minor fix in chechEditorSession function call

4fabc6e

feat: move toast to bottom right

99bd413

chore: update meta tag

231a3e9

feat: update meta description

f276932

feat: enable ai

4eba0dc

installed lodash

6ea0dea

zoosphar force-pushed the migration-to-app-router-ZPHR branch from 2332d33 to 6ea0dea Compare January 23, 2024 16:37

zoosphar requested a review from TallTed January 24, 2024 06:11

update metadata content in layout.tsx

a055738

zoosphar marked this pull request as ready for review January 28, 2024 11:18

TallTed reviewed Jan 29, 2024

View reviewed changes

src/app/layout.tsx Outdated Show resolved Hide resolved

Update layout.tsx

471d7b2

Co-authored-by: Ted Thibodeau Jr <[email protected]>

zoosphar requested a review from TallTed February 1, 2024 10:42

TallTed reviewed Feb 1, 2024

View reviewed changes

Merge branch 'main' into migration-to-app-router-ZPHR

7f2cf0e

AykutSarac added 6 commits February 3, 2024 12:20

fix: pages.tsx

2402e81

fix: sign-in page.tsx

3979d73

feat: lazy load adapter libs

e234db0

Merge branch 'main' into migration-to-app-router-ZPHR

3ac83b1

fix: update components

815e4ba

chore: update deps & add next lint

b4f9a08

TallTed reviewed Feb 5, 2024

View reviewed changes

AykutSarac closed this Sep 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Migrated project from pages to app router #380

Migrated project from pages to app router #380

zoosphar commented Jan 22, 2024

TallTed left a comment

TallTed Jan 22, 2024

zoosphar Jan 23, 2024

TallTed Jan 22, 2024

TallTed Jan 22, 2024

TallTed commented Jan 24, 2024

zoosphar commented Jan 27, 2024 •

edited

Loading

zoosphar commented Jan 28, 2024

TallTed left a comment

AykutSarac commented Feb 3, 2024

TallTed Feb 5, 2024

TallTed Feb 5, 2024

zoosphar commented Feb 11, 2024

AykutSarac commented Feb 14, 2024

zoosphar commented Feb 14, 2024

	"Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.",
	"Innovative and open-source visualization application that produces interactive graphs from various data formats, such as JSON, YAML, XML, CSV and more.",

	title: "JSON Crack - Visualize Data to Graphs",
	title: "JSON Crack - Visualize Data as Graphs",

	<meta name="description" content="Embedding JSON Crack tutorial into your websites." />
	<meta name="description" content="Embedding JSON Crack tutorial in your websites." />

		Page you are trying to open does not exist. You may have mistyped the address, or the page
		has been moved to another URL. If you think this is an error contact support.

Migrated project from pages to app router #380

Migrated project from pages to app router #380

Conversation

zoosphar commented Jan 22, 2024

TallTed left a comment

Choose a reason for hiding this comment

TallTed Jan 22, 2024

Choose a reason for hiding this comment

zoosphar Jan 23, 2024

Choose a reason for hiding this comment

TallTed Jan 22, 2024

Choose a reason for hiding this comment

TallTed Jan 22, 2024

Choose a reason for hiding this comment

TallTed commented Jan 24, 2024

zoosphar commented Jan 27, 2024 • edited Loading

zoosphar commented Jan 28, 2024

TallTed left a comment

Choose a reason for hiding this comment

AykutSarac commented Feb 3, 2024

TallTed Feb 5, 2024

Choose a reason for hiding this comment

TallTed Feb 5, 2024

Choose a reason for hiding this comment

zoosphar commented Feb 11, 2024

AykutSarac commented Feb 14, 2024

zoosphar commented Feb 14, 2024

zoosphar commented Jan 27, 2024 •

edited

Loading